<template>
<div class="grid-x">
  <div v-if="total > 0" class="auto cell et-table-page-info hide-for-small-only">
    <span>{{ $t('common.show') }} {{ start }} ~ {{ end }} / {{ $t('common.pagination.total', { number: total }) }}</span>
  </div>
  <div class="auto cell et-table-page-info show-for-small-only">
    <span>{{ currentPageNum }} / {{ totalPageNum }}</span>
  </div>
  <div class="auto cell small-6 text-right">
    <pagination :total-page-num="totalPageNum" :current-page-num="currentPageNum" :handler="paginationHandler" />
  </div>
</div>
</template>

<script>
import Pagination from '../../navigator/Pagination';

export default {

  components: {
    Pagination
  },

  props: {
    start: {
      type: Number,
      required: true
    },
    end: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    currentPageNum: {
      type: Number,
      required: true
    },
    totalPageNum: {
      type: Number,
      required: true
    },
    paginationHandler: {
      type: Function,
      default: () => {}
    }
  }

};
</script>
